<template>
	<view class="qiandaoyei">
		<view class="qiandaotitle">
			<view class="qiandaotitleleft">
				<view class="top">

				</view>
				<view class="zhong">
					签到领红包
				</view>
				<view class="boom">
					天天赢奖励金 连签兑红包
				</view>
			</view>
			<view class="qiandaotitleright" @click="shiyonggzBtn">
				使用规则
			</view>
		</view>
		<view class="qianaoqu">
			<view class="left">
				<text class="jianlgijin">奖励金</text>
				<text class="jiner">{{userxinxi.signMoney}}</text>
				<text class="jianlgijin">元</text>
			</view>
			<view class="right" @click="jainglimxBtn">
				<text class="jianglname">奖励明细</text>
				<image class="jianglimg" src="../../static/xintupian/jiantou.png" mode=""></image>
			</view>

		</view>
		<view class="lijiqiandao">
			<view class="" style="width: 100%;height: 52rpx;">

			</view>
			<view class="tupianqd">
				<image v-show="userxinxi.signLxNum==0" class="diyitian" src="../static/qiandao/dilingtian2.png" mode=""></image>
				<image v-show="userxinxi.signLxNum==1" class="diyitian" src="../static/qiandao/diyitian.png" mode=""></image>
				<image v-show="userxinxi.signLxNum==2" class="diyitian" src="../static/qiandao/diertian.png" mode=""></image>
				<image v-show="userxinxi.signLxNum==3" class="diyitian" src="../static/qiandao/disantian.png" mode=""></image>
				<image v-show="userxinxi.signLxNum==4" class="diyitian" src="../static/qiandao/disitian.png" mode=""></image>
				<image v-show="userxinxi.signLxNum==5" class="diyitian" src="../static/qiandao/diwutian.png" mode=""></image>
				<image v-show="userxinxi.signLxNum==6" class="diyitian" src="../static/qiandao/diliutian.png" mode=""></image>
				<image v-show="userxinxi.signLxNum==7" class="diyitian" src="../static/qiandao/diqitian.png" mode=""></image>
			</view>
			<view v-if="!shifouqiandaoShow" class="qiandaoanniu" @click="lijiqiandaoBtn">
				立即签到
			</view>
			<view v-if="shifouqiandaoShow" class="qiandaoanniub" @click="yiqiandaol">
				立即签到
			</view>
			<view class="guangbo">
				<image style="width:32rpx;height: 32rpx;margin-left: 20rpx;" src="../static/qiandao/xiaolab.png" mode=""></image>
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				 vertical="true">
					<swiper-item v-for="item in shopList" style="height: 60rpx;">
						<view>
							<view class="wenzhi">{{ item.nickname }}{{item.content}}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="meirifuli">
			<view class="shugang">

			</view>
			<view class="shugangname">
				每日福利任务
			</view>
		</view>
		<view class="quxiadan">
			<image class="quxiadanimg" src="../static/qiandao/qiandaotupian.png" mode=""></image>
			<view class="quxiadanzhong">
				<view class="quxiadanzhongtop">
					<text class="maiocainame">买菜返现任务</text>
					<text class="wanchengjl">完成得{{signTaskMoney}}元奖励</text>
				</view>
				<view class="quxiadanzhongboom">
					1天内({{renwushijian}}23:59前){{signTask}}
				</view>
			</view>
			<view class="quxiadanright" v-if="!shifoulingqu" @click="quxiandanBtn">
				去下单
			</view>
			<view class="quxiadanrightb" v-if="shifoulingqu">
				已完成
			</view>

		</view>
		<view class="meirifuli">
			<view class="shugang">

			</view>
			<view class="shugangname">
				兑换福利
			</view>
			<view class="chakanquanbu" @click="chakkanquanbuBtn">
				查看全部
			</view>
		</view>
		<view class="lijilingqu">
			<view class="lijilingqudiv">
				<view class="" v-for="item in duihuanfuliList">
					<view class="keyilingqu" v-show="item.status==0 " @click="lijilingqu(item.data)">
						<view class="shizijine">
							<text class="jianenum">{{item.data.min}}</text>
							<text class="yaunname">元</text>
						</view>
						<view class="lingjuan">
							{{item.data.title}}
						</view>
					</view>
					<view class="keyilingqub" v-show="item.status==1" @click="yijinglu">
						<view class="shizijine">
							<text class="jianenum">{{item.data.min}}</text>
							<text class="yaunname">元</text>
						</view>
						<view class="lingjuan">
							{{item.data.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="meirifuli" style="margin-bottom: 34rpx;">
			<view class="shugang">

			</view>
			<view class="shugangname">
				今日推荐
			</view>
		</view>
		<view class="tuijianshangpin">
			<view class="shangpin" v-for="item in shangpinlist">
				<image class="shangpinimg" :src="item.spuImg" mode="" @click="navToDetail(item.spuId)"></image>
				<view class="shangpinname">
					{{item.spuTitle}}
				</view>
				<view class="shangpinjiage">
					<view class="jiarugouwu">
						<view class="left">

							<text style="font-size: 20rpx;margin-right: 4rpx;">¥</text>
							{{item.spuPrice/100}}
						</view>
						<image class="right" src="../static/qiandao/gouwuche.png" mode=""@click="jiarugwBtn(item)"></image>
					</view>
					<view class="zhiqianjiage">
						¥{{item.spuOriginalPrice/100}}
					</view>

				</view>

			</view>

		</view>

		<d-alert></d-alert>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shifoulingqu: false,
				renwushijian: '',
				userxinxi: {
					signLxNum: 0,
					signMoney: 0,
				},
				shifouqiandaoShow: false,


				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				shopList: [],
				signTask: '',
				duihuanfuliList: [],
				shangpinlist:[],
				signTaskMoney:1,
			}
		},
		onLoad(option) {


		},
		onShow() {
			//获取用户信息--签到次数
			this.getqiandao()
			//判断是否断签
			this.shifouduaqian()
			//今天是否已签到
			this.getshifouqiandao()
			//获取当前时间
			this.getdangqiantme()
			//查询签到活动领取优惠券用户信息
			this.getbobaoxinxi()
			//获取当前用户今日任务
			this.getjinrirenwu()
			//用户今日是否完成任务
			this.getshifouwancrw()
			//查询所有无门槛券
			this.getalljuan()
			//推荐6个商品
			this.gettuijianshangp()

		},
		methods: {
			//加入购物车
			jiarugwBtn(item) {
				console.log('加入购物车', item)
				if (item.stock == 0) {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '库存补充中'
					});
					return
				}
				uni.showLoading({
					title: '添加中...'
				});
				const that = this
				that.$api.request('cart', 'addCartItem', {
					skuId: item.skuId,
					num: 1
				}).then(res => {
					uni.hideLoading();
					that.$api.msg('添加购物车成功')
					
				})
			},
			//商品详情
			navToDetail(id) {
				console.log(id)
				
				uni.navigateTo({
					url: `/pages/product/detail?id=${id}`
				})
			},
			//推荐6个商品
			gettuijianshangp() {
				var that = this
				var obj={}
				obj.storageId = this.$store.state.storageId,
				that.$api
					.request('integral', 'getSignShowShop', obj, failres => {
						that.$api.msg(failres.errmsg);
						uni.hideLoading();
					})
					.then(res => {
						if (res.errno == '200') {
							
							that.shangpinlist = res.data.items
						}
					});
			},
			//立即领取
			lijilingqu(item) {
				console.log('立即领取', item)
				if (item.min > this.userxinxi.signMoney) {
					uni.showToast({
						title: '积分不足！',
						icon: 'none'
					});
					return
				}

				var that = this
				var obj = {}
				obj.couponId = item.id
				that.$api
					.request('coupon', 'giveUserSignCoupons', obj, failres => {
						that.$api.msg(failres.errmsg);
						uni.hideLoading();
					})
					.then(res => {

						if (res.errno == '200') {
							that.$api.msg(res.errmsg);
							//查询所有无门槛券
							that.getalljuan()
							//获取用户信息--签到次数
							that.getqiandao()
							//查询签到活动领取优惠券用户信息
							that.getbobaoxinxi()

						}
					});
			},
			//已经领取
			yijinglu() {
				uni.showToast({
					title: '已经领取了！',
					icon: 'none'
				});
			},
			//查询所有无门槛券
			getalljuan() {
				var that = this
				that.$api
					.request('coupon', 'getSignCouponsList', {}, failres => {
						that.$api.msg(failres.errmsg);
						uni.hideLoading();
					})
					.then(res => {

						if (res.errno == '200') {

							that.duihuanfuliList = res.data
						}
					});
			},
			//去下单
			quxiandanBtn() {
				console.log('去下单')
				uni.switchTab({
					url: '/pages/index/indexs'
				});
			},
			//用户今日是否完成任务
			getshifouwancrw() {
				var that = this
				that.$api
					.request('sign', 'toDayIsTask', {}, failres => {
						that.$api.msg(failres.errmsg);
						uni.hideLoading();
					})
					.then(res => {
						if (res.errno == '200') {

							that.shifoulingqu = res.data
						}
					});
			},
			//获取当前用户今日任务
			getjinrirenwu() {
				var that = this
				that.$api
					.request('sign', 'getSignTask', {}, failres => {
						that.$api.msg(failres.errmsg);
						uni.hideLoading();
					})
					.then(res => {
						if (res.errno == '200') {
							debugger
							that.signTask = res.data.signTask
							that.signTaskMoney = res.data.signTaskMoney
						}
					});
			},
			//查询签到活动领取优惠券用户信息
			getbobaoxinxi() {
				var that = this
				that.$api
					.request('goods', 'getSignCouponsUser', {}, failres => {
						that.$api.msg(failres.errmsg);
						uni.hideLoading();
					})
					.then(res => {
						if (res.errno == '200') {

							that.shopList = res.data
						}
					});
			},
			//获取当天时间
			getdangqiantme() {
				var myDate = new Date();
				var yue = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				var tian = myDate.getDate(); //获取当前日(1-31)
				this.renwushijian = yue + '月' + tian + '日'
			},
			//今天是否已签到
			getshifouqiandao() {
				var that = this
				that.$api
					.request('sign', 'toDayIsSign', {}, failres => {
						that.$api.msg(failres.errmsg);
						uni.hideLoading();
					})
					.then(res => {
						if (res.errno == '200') {
							that.shifouqiandaoShow = res.data
							console.log('今天是否已签到', that.shifouqiandaoShow)
						}
					});
			},

			//判断是否断签
			shifouduaqian() {
				var that = this
				uni.showLoading({
					title: '加载中...'
				});
				that.$api
					.request('sign', 'isNotSign', {}, failres => {
						that.$api.msg(failres.errmsg);
						uni.hideLoading();
					})
					.then(res => {
						uni.hideLoading();
						if (res.errno == '200') {
							if (res.data) { //没有断签

							} else {
								that.$showModal({
									content: '签到中断',
									title: '0',
									showCancel: false,
									success(res) {
										if (res.confirm) {
											console.log('用户点击确定')
										} else if (res.cancel) {
											console.log('用户点击取消')
										}
									}
								})
							}

						}
					});
			},
			//获取用户信息--签到次数
			getqiandao() {
				var that = this
				let obj = {};
				obj.userId = uni.getStorageSync('userInfo').id;
				that.$api
					.request('user', 'getUserInfo', obj, failres => {
						that.$api.msg(failres.errmsg);
						uni.hideLoading();
					})
					.then(res => {
						if (res.errno == '200') {
							if (res.data) {
								that.userxinxi = res.data
								console.log('that.userxinxi', that.userxinxi)
							}
						}
					});
			},
			//查看全部
			chakkanquanbuBtn() {
				console.log('查看全部')
				uni.navigateTo({
					url: "/pagesA/qiandao/duihuanfuli"
				});
			},
			//奖励明细
			jainglimxBtn() {
				console.log('奖励明细')
				uni.navigateTo({
					url: "/pagesA/qiandao/jianglimingix"
				});
			},
			//使用规则
			shiyonggzBtn() {
				console.log('使用规则')
				uni.navigateTo({
					url: "/pagesA/qiandao/shiyongguizi"
				});
			},
			//已经签到了
			yiqiandaol() {
				uni.showToast({
					title: '一天只能签到一次哦！',
					icon: 'none'
				});
			},
			//立即签到
			lijiqiandaoBtn() {
				console.log('签到')
				uni.showLoading({
					title: '签到中...'
				});
				var that = this
				that.$api
					.request('sign', 'goSign', {}, failres => {
						uni.hideLoading();
						that.$api.msg(failres.errmsg);
					})
					.then(res => {
						if (res.errno == '200') {
							uni.hideLoading();
							console.log('立即签到', res)
							this.shifouqiandaoShow = true
							//获取用户信息--签到次数
							this.getqiandao()
							
							this.$showModal({
								content: '签到成功',
								title: res.data,
								jine:that.signTaskMoney,
								renwu:that.signTask,
								showCancel: false,
								success(res) {
									if (res.confirm) {
										console.log('用户点击确定')
									} else if (res.cancel) {
										console.log('用户点击取消')
									}
								}
							})
						}
					});
			},

		}
	}
</script>

<style lang='scss'>
	page {
		background-color: #F9F9F9;
	}

	.qiandaoyei {
		width: 100%;
		height: 100%;

		.quxiadan {
			width: 702rpx;
			height: 184rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 32rpx;
			margin-left: 24rpx;
			display: flex;
			align-items: center;

			.quxiadanrightb {
				width: 136rpx;
				height: 48rpx;
				background: #C5C5C5;
				border-radius: 24rpx;
				border: 2rpx solid #C5C5C5;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 28rpx;
			}

			.quxiadanright {
				width: 136rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				border: 2rpx solid #36B542;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #36B542;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 28rpx;

			}

			.quxiadanzhong {
				width: 330rpx;
				margin-left: 16rpx;

				.quxiadanzhongboom {

					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 34rpx;
					margin-top: 16rpx;
				}

				.quxiadanzhongtop {
					.wanchengjl {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #36B542;
						margin-left: 8rpx;
					}

					.maiocainame {
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

				}
			}

			.quxiadanimg {
				width: 160rpx;
				height: 158rpx;
				margin-left: 16rpx;
			}

		}

		.lijilingqu {
			width: 702rpx;
			height: 252rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 34rpx;
			margin-left: 24rpx;
			overflow-y: hidden;
			overflow-x: auto;

			.lijilingqudiv {
				width: 950rpx;
				height: 188rpx;
				margin-top: 32rpx;
				padding-left: 12rpx;
				display: flex;
				align-items: center;

				.keyilingqub {
					width: 160rpx;
					height: 188rpx;
					margin-left: 20rpx;
					background: url(../static/qiandao/bunenglingqu.png);
					background-size: 100% 100%;

					.lingjuan {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #36B542;
						text-align: center;
						margin-top: 0rpx;
					}

					.shizijine {
						text-align: center;

						.yaunname {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #36B542;
							margin-left: 2rpx;
						}

						.jianenum {
							height: 72rpx;
							font-size: 72rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							color: #36B542;
						}
					}
				}

				.keyilingqu {
					width: 160rpx;
					height: 188rpx;
					margin-left: 20rpx;
					background: url(../static/qiandao/qiandaolq.png);
					background-size: 100% 100%;

					.lingjuan {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #36B542;
						text-align: center;
						margin-top: 0rpx;
					}

					.shizijine {
						text-align: center;

						.yaunname {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #36B542;
							margin-left: 2rpx;
						}

						.jianenum {
							height: 72rpx;
							font-size: 72rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							color: #36B542;
						}
					}
				}
			}
		}

		.tuijianshangpin {
			width: 702rpx;
			height: 342rpx;
			margin-left: 24rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.shangpin {
				width: 220rpx;
				height: 352rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 32rpx;

				.shangpinjiage {
					width: 200rpx;
					height: 65rpx;
					margin-top: 14rpx;
					margin-left: 10rpx;

					.zhiqianjiage {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-top: 6rpx;
						text-decoration: line-through;
					}

					.jiarugouwu {
						width: 100%;
						height: 40rpx;
						display: flex;
						justify-content: space-between;

						.left {
							font-size: 36rpx;
							font-family: Roboto-Bold, Roboto;
							font-weight: bold;
							color: #36B542;
						}

						.right {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.shangpinname {
					width: 180rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #333333;
					margin-left: 10rpx;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行
				}

				.shangpinimg {
					width: 200rpx;
					height: 200rpx;
					margin-top: 10rpx;
					margin-left: 10rpx;
				}
			}
		}

		.meirifuli {
			width: 702rpx;
			margin-left: 24rpx;
			margin-top: 48rpx;
			display: flex;
			align-items: center;

			.chakanquanbu {
				width: 545rpx;
				font-size: 20rpx;

				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #36B542;
				text-align: right;
			}

			.shugangname {

				font-size: 32rpx;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 600;
				color: #333333;
				margin-left: 16rpx;
			}

			.shugang {
				width: 8rpx;
				height: 32rpx;
				background: #36B542;
				border-radius: 4rpx;
			}
		}

		.lijiqiandao {
			width: 702rpx;
			height: 412rpx;
			background: #FFFFFF;
			border-radius: 0px 0px 16rpx 16rpx;
			margin-left: 24rpx;

			.guangbo {
				width: 670rpx;
				margin-top: 45rpx;
				margin-left: 16rpx;
				display: flex;
				align-items: center;

				.wenzhi {
					font-size: 24rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #194E1E;
					line-height: 36rpx;
				}

				.swiper {
					width: 300rpx;
					height: 35rpx;
					font-size: 24rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #194E1E;
					margin-left: 10rpx;
				}

			}

			.qiandaoanniub {
				width: 670rpx;
				height: 80rpx;
				background: #B0B0B0;
				border-radius: 45rpx;
				font-size: 40rpx;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #FFFFFF;
				margin-left: 16rpx;
				margin-top: 64rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.qiandaoanniu {
				width: 670rpx;
				height: 80rpx;
				background: #36B542;
				border-radius: 45rpx;
				font-size: 40rpx;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #FFFFFF;
				margin-left: 16rpx;
				margin-top: 64rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.tupianqd {
				width: 670rpx;
				margin-left: 16rpx;
				height: 100rpx;

				.diyitian {
					width: 670rpx;
					height: 100rpx;
				}
			}
		}

		.qianaoqu {
			width: 702rpx;
			height: 100rpx;
			background: #36B542;
			border-radius: 16rpx 16rpx 0px 0px;
			margin-left: 24rpx;
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				margin-left: 16rpx;
				display: flex;
				align-items: center;

				.jiner {
					font-size: 48rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #F7D600;
					margin-left: 8rpx;
					margin-right: 8rpx;
				}

				.jianlgijin {
					font-size: 36rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.right {
				display: flex;
				align-items: center;
				margin-right: 30rpx;

				.jianglname {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.jianglimg {
					width: 32rpx;
					height: 32rpx;
					margin-left: 16rpx;
				}
			}
		}

		.qiandaotitle {
			width: 702rpx;
			height: 32rpx;
			margin-left: 24rpx;
			margin-top: 48rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.qiandaotitleleft {
				display: flex;
				height: 32rpx;
				align-items: center;

				.boom {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.zhong {
					font-size: 32rpx;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 600;
					color: #333333;
					margin-left: 12rpx;
					margin-right: 8rpx;
				}

				.top {
					width: 8rpx;
					height: 32rpx;
					background: #36B542;
					border-radius: 4rpx;
				}
			}

			.qiandaotitleright {
				width: 100rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}
	}
</style>
